<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Ajax Framework <span class="subitem">RemoteCommand</span>
    </ui:define>

    <ui:define name="description">
        <p>
            RemoteCommand provides a simple way to execute backing bean methods with javascript.
        </p>
        <p>
            Sometimes you need to add a dynamic callback for when the remote command completes. Each remote command, when
            called, returns a promise-like object you can use for that purposes. Try opening a dev console and run the
            function "runRemoteCommand". See below for the code.
        </p>
    </ui:define>

    <ui:param name="documentationLink" value="/components/remotecommand"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
                <p:remoteCommand name="rc" update="msgs" action="#{remoteCommandView.execute}"/>

                <p:remoteCommand name="rc2" update="msgs" action="#{remoteCommandView.execute}"
                                 oncomplete="PF('msgsWidget').renderMessage({severity: 'info', summary: 'Data Received', detail: args.serverTime})"/>

                <h5>Basic</h5>
                <p>Execute a simple remote command by calling a javascript function.</p>
                <p:commandButton type="button" value="Send" icon="pi pi-refresh" onclick="rc()"/>

                <h5>Parameters</h5>
                <p>Passing parameters to the remote method as a javascript object.</p>
                <p:commandButton type="button" value="Send" icon="pi pi-refresh"
                        onclick="rc([{name: 'param1', value: 'foo'}, {name: 'param2', value: 'bar'}])"/>

                <h5>Receive Values Back</h5>
                <p>Receiving values form the server as a serialized json object.</p>
                <p:commandButton type="button" value="Send" icon="pi pi-refresh" onclick="rc2()"/>

                <script>
                    function runRemoteCommand(param1, param2) {
                        var promise = rc([{name: 'param1', value: param1}, {name: 'param2', value: param2}]);
                        promise.then(function (responseData) {
                            var serverTime = responseData.jqXHR.pfArgs.serverTime;
                            console.log("Request successful, returned server time is", serverTime);
                        }).catch(function (error) {
                            console.error("Request failed", error);
                        });
                    }
                </script>

                <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" widgetVar="msgsWidget" />
            </h:form>
        </div>
    </ui:define>

</ui:composition>
